<template>
    <div class="top-view">
        <div class="search-bar">
        <el-input class="search-input" v-model="searchKey" suffix-icon="el-icon-search"  type="text" :placeholder="t('home.search')" />
     </div>
     <ul class="user-abr">
        <li>
            <LocaleSetting />
        </li>
        <li class="user-action-list">
            <div class="user-action-icon" @click="loginOut"></div>
        </li>
     </ul>
    </div>
    <div
        v-loading="loading"
        class="service-ad-pic_wrapper"
        element-loading-background="rgba(233,233,235, 0.8)"
        style="width: 100%"
    >
        <div class="table-list">
            <ElTable :data="tableData" 
            fit
            highlight-current-row
            >
                <ElTableColumn prop="domain" :label="t('tenantList.tenantDomain')" width="180"></ElTableColumn>
                <ElTableColumn prop="name" :label="t('tenantList.tenantName')" width="280"></ElTableColumn>
                <ElTableColumn prop="number" :label="t('tenantList.USCC')" width="250"></ElTableColumn>
                <ElTableColumn prop="status" :label="t('tenantList.status')">
                    <template #default="scope">
                        <span v-if="scope.row.status === 1">{{ t('tenantList.statusMap.1') }}</span>
                        <span v-if="scope.row.status === 2">{{ t('tenantList.statusMap.2') }}</span>
                        <span v-if="scope.row.status === 3">{{ t('tenantList.statusMap.3') }}</span>
                    </template>
                </ElTableColumn>
                <ElTableColumn :label="t('tenantList.operation')">
                    <template #default="scope">
                        <ElButton
                            v-if="scope.row.status === 1"
                            type="text"
                            size="small"
                            @click="handleClick(scope.row, 2)"
                        >
                            {{ t('tenantList.register') }}
                        </ElButton>
                        <ElButton
                            v-if="scope.row.status === 2"
                            type="text"
                            size="small"
                            @click="handleClick(scope.row, 3)"
                        >
                            {{ t('tenantList.revoke') }}
                        </ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
            <el-pagination
            background
            layout="total, prev, pager, next"
            :total="totals"
            @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getTenants, setTenant } from '@/api/api.query.util';
import { debounce } from '@/utils/utils';
import { t } from '@/i18n';
import { useRouter } from 'vue-router';
import { deleteCookie } from '@/utils/utils';
import LocaleSetting from '@/components/LocaleSetting.vue';

const router = useRouter();
function loginOut() {
    deleteCookie('SaaS_Token');
    router.push({ name: '/login' });
}
const currentPage = ref(1);
const totals = ref(0);
const loading = ref(false);
const searchKey = ref('');
const tableData = ref([]);
initTable();

function initTable() {
    getTenants({
        method: 'post',
        data: {
            current: currentPage.value,
            size: 10,
        },
    }).then((res) => {
        tableData.value = res.result.records;
        totals.value = res.result.total;
    });
}

function handleCurrentChange(current: any) {
    currentPage.value = current;
    initTable();
}

function handleClick(row: any, status: number) {
    loading.value = true;
    debounce(() => {
        setTenant({
            method: 'put',
            data: {
                number: row.number,
                status,
            },
        }).then(() => {
            loading.value = false;
            ElMessage.success(t('tenantList.operationSuccessful'));
            initPage();
            initTable();
        });
    }, 500);
}

function initPage() {
    currentPage.value = 1;
}
</script>

<style scoped>
.service-ad-pic_wrapper {
    display: flex;
    flex-grow: 1;
}

.table-list {
    border-radius: 4px;
    background-color: #ffffff;
    padding: 20px;
    flex-grow: 1;
}
.mt20 {
    margin-top: 20px;
}

.search-bar {
    width: 302px;
}
.search-input {
    height: 28px;
    width: 100%;
    border: none;
    outline: none;
    border-radius: var(--border-radius);
    margin: 30px;
}
search-input::placeholder {
    color: var(--font-color-dim);
}

.user-abr {
    display: flex;
    gap: 28px;
}

.user-abr > li {
    display: flex;
    align-items: center;
}

.international-action-icon {
    padding-left: 22px;
    height: 16px;
    line-height: 16px;
    color: var(--font-color-dim);
    font-size: 12px;
    cursor: pointer;
}

.user-action-icon {
    width: 28px;
    height: 28px;
    background: url('~@/assets/image/user@2x.png') no-repeat center center / 28px;
    cursor: pointer;
}

.top-view{
 display: flex;
 justify-content: space-between;
 margin-right: 30px;
}
</style>
